<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
import http from '@/http'
import { onMounted, reactive, ref } from 'vue'
import Cookies from 'universal-cookie'
import { useUserStore } from '@/stores/user'
import { pa, tr } from 'element-plus/es/locale'
interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const regItemName = ref();
const status = ref();
let pageNum = ref(1);
let pageSize = ref(4);
const tableData = ref();
let total = ref();
//查询请求
function select() {
  http.get('/sri/page', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      regItemName: regItemName.value,
      status: status.value
    }
  }).then((ref) => {
    console.log(ref)
    tableData.value = ref.list
    total.value = ref.total
  })
}
onMounted(() => {
  select();
})
const form = reactive({
  regItemName: '',
  regItemFee: '',
  status: '',
  updateTime: '',
  updateBy: '',
  regItemId: '',
  createTime: '',
  createBy: ''
})
//当前页发生改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  //获取当前页的数据
  select()
}
const dialogFormVisible = ref(false)
const tian=ref(false)
const formLabelWidth = '200px'
// 修改
const update = (index: number, row) => {
  //控制修改模态框的显示
  form.regItemName = row.regItemName
  form.regItemFee = row.regItemFee
  form.status = row.status
  form.regItemId = row.regItemId
  // 时间
  const now = new Date();
  const year = now.getFullYear();
  const month = ('0' + (now.getMonth() + 1)).slice(-2);
  const day = ('0' + now.getDate()).slice(-2);
  const hours = ('0' + now.getHours()).slice(-2);
  const minutes = ('0' + now.getMinutes()).slice(-2);
  const seconds = ('0' + now.getSeconds()).slice(-2);
  const formattedTime = year + '-' + month + '-' + day + '-' + hours + '-' + minutes + '-' + seconds;
  form.updateTime = formattedTime;
  const userStore = useUserStore()
  const user = userStore.getUser.value
  form.updateBy = user.userName
  dialogFormVisible.value = true
}
const ii = ref()
function up() {
  http.post('/sri/update', form).then((ref) => {
    ii.value = ref
  })
  dialogFormVisible.value = false
  window.location.reload();
}
function tianjia(){
  const now = new Date();

const year = now.getFullYear();
const month = ('0' + (now.getMonth() + 1)).slice(-2);
const day = ('0' + now.getDate()).slice(-2);
const hours = ('0' + now.getHours()).slice(-2);
const minutes = ('0' + now.getMinutes()).slice(-2);
const seconds = ('0' + now.getSeconds()).slice(-2);
const formattedTime = year + '-' + month + '-' + day + '-' + hours + '-' + minutes + '-' + seconds;
form.createTime = formattedTime;
const userStore = useUserStore()
const user = userStore.getUser.value
form.createBy = user.userName
http.post('/sri/insert',form).then((ref)=>{
ii.value=ref
})
tian.value=false
}
</script>
<template>
  <form>
    <div>
      <ul>
        <li>挂号费名称&nbsp;&nbsp;<input type="text" style="width: 200px;" v-model="regItemName" /></li>
        <li>状态&nbsp;&nbsp;<select style="width: 100px; text-align: center;" v-model="status">
            <option value="0">正常</option>
            <option value="1">停用</option>
          </select></li>
        <li><el-button type="primary" :icon="Search" style="height: 25px;" @click="select()">搜索</el-button></li>
        <li><input type="reset"
            style="background-color: #409eff; width: 80px; height: 25px; color: aliceblue; border: 0px; border-radius: 10%;">
        </li>
      </ul>
    </div>
  </form>
  <div class="mb-4" style="margin-top: 70px; margin-left: 60px;">
    <el-button type="primary" style="width: 200px;" @click="tian = true">+添加</el-button>
  </div>

  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column property="regItemId" label="挂号项id" width="120" />
    <el-table-column property="regItemName" label="挂号项目名称" />
    <el-table-column property="regItemFee" label="金额" />
    <el-table-column label="状态">
      <template #default="scope">
        <span v-if="scope.row.status == 0">正常</span>
        <span v-else-if="scope.row.status == 1">停用</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="update(scope.$index, scope.row)">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-row justify="center">
    <el-col :span="12" :offset="6">
      <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
        v-model:current-page="pageNum" @current-change="handleCurrentChange" />
    </el-col>
  </el-row>

  <!-- 修改框 -->
  <el-dialog v-model="dialogFormVisible" title="修改" width="800">
    <el-form :model="form">
      <el-form-item label="挂号费用名称" :label-width="formLabelWidth" v-model="form.regItemName">
        <el-input v-model="form.regItemName" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="金额" :label-width="formLabelWidth" v-model="form.regItemFee">
        <el-input v-model="form.regItemFee" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio-group v-model="form.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=up()>修改</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
<!-- 添加框 -->
<el-dialog v-model="tian" title="添加" width="800">
    <el-form :model="form">
      <el-form-item label="挂号费用名称" :label-width="formLabelWidth" v-model="form.regItemName">
        <el-input v-model="form.regItemName" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="金额" :label-width="formLabelWidth" v-model="form.regItemFee">
        <el-input v-model="form.regItemFee" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio-group v-model="form.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=tianjia()>添加</el-button>
        <el-button type="primary" @click="tian = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
ul li {
  list-style: none;
  float: left;
  margin-left: 40px;
}
</style>
